<template>
  <div style="height: 100%">
    <hello-world ref="myApp" />
    <div class="titles">
      <span>数字孪生配网3D可视化</span>
      <div class="date">{{ years }}</div>
    </div>
    <div class="mains">
      <div
        :class="{
          'dhatm mains-d1 center': active == index,
          'center mains-d1': active !== index,
        }"
        v-for="(item, index) in datas"
        :key="index"
        @click="gotoClick(index, item.name)"
      >
        <img :src="item.icon" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div :class="{ 'diaog ds2': diaogShow, 'ds diaog': !diaogShow }">
      <div class="titleDis">
        <p>{{ activeName }}</p>
        <div class="titd2">
          <img
            @click="diaogShow = false"
            style="width: 20px"
            src="@/assets/imgs/close.svg"
          />
        </div>
      </div>

      <ul class="uls" v-if="activeName !== '供电单元'">
        <li class="lis" v-for="(item, index) in dataslist" :key="item.id">
          <img :src="datas2[activeName]" />
          <span class="lisName">{{ item.name }}</span>
          <div class="divs">
            <!-- <img
              :src="item.status ? img2 : img4"
              @click="gethid(item, index)"
            /> -->
            <img
              :src="activeImg == index ? dh2 : dh"
              @click="getdh(item, index)"
            />
          </div>
        </li>
      </ul>
      <div v-if="activeName == '供电单元'">
        <div
          class="btns"
          v-for="item in gddyList"
          :key="item"
          @click="goGgdy(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";

import hwgData from "../../static/json/hwg.json"
import xianluData from "../../static/json/xlu10kv.json"
import "@/assets/css/index.css";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      dataslist: [],
      diaogShow: false,
      active: 99,
      activeImg: null,
      activeName: "",
      years: "",
      dh2: require("@/assets/imgs/dh2.svg"),
      dh: require("@/assets/imgs/dh.svg"),
      img2: require("@/assets/imgs/show.svg"),
      img4: require("@/assets/imgs/hid.svg"),
      datas: [
        { name: "变电站", icon: require("@/assets/imgs/bdz.svg") },
        { name: "虚拟漫游", icon: require("@/assets/imgs/xnmy.svg") },
        { name: "线路", icon: require("@/assets/imgs/xl.svg") },
        { name: "供电单元", icon: require("@/assets/imgs/xt.svg") },
        { name: "环网柜", icon: require("@/assets/imgs/hwg.svg") },
      ],
      datas2: {
        变电站: require("@/assets/imgs/bdz.svg"),
        虚拟漫游: require("@/assets/imgs/xnmy.svg"),
        线路: require("@/assets/imgs/xl.svg"),
        供电单元: require("@/assets/imgs/xt.svg"),
        环网柜: require("@/assets/imgs/hwg.svg"),
      },
      gddyList: [
        "HN-CS-YL-SF-001",
        "HN-CS-YL-SF-002",
        "HN-CS-YL-SF-003",
        "HN-CS-YL-SF-004",
        "HN-CS-YL-SF-005",
        "HN-CS-YL-SF-006",
      ],
      //   变电站
      bdzList: [
        {
          id: "bdz1",
          name: "110kV桐梓坡变",
          status: true,
          lon: 112.939658032,
          lat: 28.226638709300001,
        },
        {
          id: "bdz2",
          name: "110kV望城坡变",
          status: true,
          lon: 112.898153,
          lat: 28.222897,
        },
        {
          id: "bdz3",
          name: "110kV谭石变",
          status: true,
          lon: 112.932196,
          lat: 28.207753,
        },
        {
          id: "bdz4",
          name: "110kV石岭塘变",
          status: true,
          lon: 112.942568,
          lat: 28.235686,
        },
        {
          id: "bdz5",
          name: "220kV天顶变",
          status: true,
          lon: 112.908641808,
          lat: 28.230475991999999,
        },
        {
          id: "bdz6",
          name: "110kV麓龙变",
          status: true,
          lon: 112.89344529500001,
          lat: 28.213217992899999,
        },
        {
          id: "bdz7",
          name: "110kV游园东变",
          status: true,
          lon: 112.908425,
          lat: 28.202625,
        },
        {
          id: "bdz8",
          name: "110kV西站变",
          status: true,
          lon: 112.91088104600001,
          lat: 28.218299059800001,
        },
        {
          id: "bdz9",
          name: "110kV金谷变",
          status: true,
          lon: 112.925083539,
          lat: 28.2345748097,
        },
        {
          id: "bdz10",
          name: "220kV湘岳南变",
          status: true,
          lon: 112.95059947500001,
          lat: 28.217880666499999,
        },
      ],
      //   环网柜
      hwgList:[],
      // 线路
      xianluList:[]
    };
  },
  created() {
    this.getYear();
    this.$nextTick(() => {
      // this.adds();
      this.hwgList=hwgData
      this.xianluList=xianluData
    });
  },
  methods: {
    //   菜单打开
    gotoClick(i, name) {
      this.active = i;
      this.activeImg = null
      this.activeName = name;
      this.diaogShow = true;
      if (name == '变电站') {
        this.dataslist = this.bdzList;
      } else if (name == '环网柜') {
        this.dataslist = this.hwgList;
      }else if (name == '线路') {
        this.dataslist = this.xianluList;
      } else {
        this.dataslist = [];
      }
    },
    // 显示隐藏
    gethid(it, i) {
      this.bdzList.forEach((r) => {
        if (it.name == r.name) {
          r.status = !r.status;
        }
      });
      this.dataslist = this.bdzList;
      var s = !it.status;
      this.$refs.myApp.removeEntity(it.id, s);
    },
    // 新增后定位导航
    getdh(r, i) {
      this.activeImg = i;
      const e = {
          gltfUrl: "",
          scale: 0.8,
          lon: r.lon,
          lat: r.lat,
          height: 90,
          id: null,
          name:r.name
        };
      if (this.activeName=='变电站') {
        e.id=r.id
        e.gltfUrl='/static/gltf/变电站.gltf'
      }else if (this.activeName=='环网柜') {
        e.gltfUrl='/static/gltf/环网柜.gltf'
        e.id='hwg'+i
        e.scale=10
      }else if (this.activeName=='线路') {
        console.log('方法')
        return
      }
      console.log(222)
      this.$refs.myApp.addEntity(e);
    },
    // 供电单元
    goGgdy(id) {
       this.$refs.myApp.showsupply(id);
    },
    // 时间
    getYear() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var t = date.getDate();
      m = m < 10 ? "0" + m : m;
      t = t < 10 ? "0" + t : t;
      this.years = y + "年" + m + "月" + t + "日";
    },
    // 去重方法array数组key唯一值
    uniqueArray(array, key){
      var result = [array[0]];
      for(var i = 1; i < array.length; i++){
          var item = array[i];
          var repeat = false;
          for (var j = 0; j < result.length; j++) {
              if (item[key] == result[j][key]) {
                  repeat = true;
                  break;
              }
          }
          if (!repeat) {
              result.push(item);
          }
      }
      return result;
    }
  },
};
</script>
<style scoped>
</style>
